<template>
	<view class="padding_30">
		<view class="auth-title">
			选择认证类型
		</view>
		<view class="auth-type-box">
			<view class="item" @click="toperson">
				<image src="@/pages/user/static/images/person.png" mode="widthFix"></image>
				<view class="item-state">
					<view class="auth-type">
						个人认证
					</view>
					<view class="is-auth">
						<!-- <text class="name" v-if="userstore.authStatusInfo.individual==1">{{userstore.selfAuthInfo.name}}</text> -->
						<image src="@/pages/user/static/images/n_auth.png" mode="widthFix" v-if="userstore.authStatusInfo.individual!=1"></image>
						<image src="@/pages/user/static/images/y_auth.png" mode="widthFix" v-if="userstore.authStatusInfo.individual==1"></image>
						<text class="n-auth" v-if="userstore.authStatusInfo.individual==99">未认证</text>
						<text class="n-auth" v-if="userstore.authStatusInfo.individual==0">审核中</text>
						<text class="n-auth" v-if="userstore.authStatusInfo.individual==2">认证失败</text>
						<text class="y-auth" v-if="userstore.authStatusInfo.individual==1">已认证</text>
					</view>
				</view>
				<image class="enter-img" src="@/static/images/enter.png" mode="widthFix"></image>
			</view>
			<view class="item" @click="toenterprise">
				<image src="@/pages/user/static/images/enterprise.png" mode="widthFix"></image>
				<view class="item-state">
					<view class="auth-type">
						企业认证
					</view>
					<view class="is-auth">
						<text class="name" v-if="userstore.authStatusInfo.company==1">{{userstore.companyAuthInfo.name}}</text>
					</view>
					<view class="is-auth" style="margin-top: 6rpx;">
						<image src="@/pages/user/static/images/n_auth.png" mode="widthFix" v-if="userstore.authStatusInfo.company!=1"></image>
						<image src="@/pages/user/static/images/y_auth.png" mode="widthFix" v-if="userstore.authStatusInfo.company==1"></image>
						<text class="n-auth" v-if="userstore.authStatusInfo.company==99">未认证</text>
						<text class="n-auth" v-if="userstore.authStatusInfo.company==0">审核中</text>
						<text class="n-auth" v-if="userstore.authStatusInfo.company==2">认证失败</text>
						<text class="y-auth" v-if="userstore.authStatusInfo.company==1">已认证</text>
					</view>
				</view>
				<image class="enter-img" src="@/static/images/enter.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
	
</template>

<script setup>
	import {onShow} from '@dcloudio/uni-app'
	import {useUserStore} from '@/store/modules/user.js'
	import { ref } from 'vue';
	const userstore = useUserStore()
	onShow(()=>{
		userstore.getUserAuthStatus()
		userstore.getUserAuthInfo({type:'individual'})
		userstore.getUserAuthInfo({type:'company'})
	})
	const toperson = ()=>{
		uni.navigateTo({
			url:'/pages/user/personauth/index'
		})
	}
	const toenterprise = ()=>{
		uni.navigateTo({
			url:'/pages/user/enterpriseauth/index'
		})
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.padding_30{
		padding: 30rpx;
		.auth-title{
			font-weight: bold;
			font-size: 40rpx;
			color: #333333;
		}
		.auth-type-box{
			margin-top: 60rpx;
			.item{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding: 30rpx;
				margin-top: 30rpx;
				width: 690rpx;
				height: 212rpx;
				background: #F6F6F6;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				opacity: 0.9;
				image{
					width: 152rpx;
					height: 152rpx;
				}
				.item-state{
					flex: 1;
					margin-left: 30rpx;
					.auth-type{
						padding-bottom: 30rpx;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}
					.is-auth{
						display: flex;
						align-items: center;
						.name{
							padding-right: 20rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
						}
						image{
							width: 26rpx;
							height: 26rpx;
						}
						.n-auth{
							padding-left: 8rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #FE3052;
						}
						.y-auth{
							padding-left: 8rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #67C23A;
						}
					}

				}
				.enter-img{
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}
	
</style>